
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { useLanguage } from "@/contexts/LanguageContext";
import { BookOpen, Search, Filter, Download, Upload, Star } from "lucide-react";

const Resources = () => {
  const { t } = useLanguage();

  const resources = [
    {
      title: "Elementary Math Lesson Plans",
      type: "Lesson Plan",
      grade: "K-5",
      subject: "Mathematics",
      rating: 4.8,
      downloads: 1240
    },
    {
      title: "Science Lab Activities",
      type: "Activity Guide",
      grade: "6-8",
      subject: "Science",
      rating: 4.9,
      downloads: 980
    },
    {
      title: "Creative Writing Prompts",
      type: "Resource Pack",
      grade: "9-12",
      subject: "English",
      rating: 4.7,
      downloads: 750
    }
  ];

  return (
    <div className="min-h-screen flex flex-col bg-gray-50">
      <Navbar />

      <main className="flex-1 py-8">
        <div className="container mx-auto px-4">
          <div className="mb-8">
            <h1 className="text-4xl font-bold mb-4 text-gray-900">
              {t('resources.title')}
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl">
              {t('resources.subtitle')}
            </p>
          </div>

          {/* Search and Filter Section */}
          <div className="bg-white rounded-lg shadow-sm p-6 mb-8">
            <div className="flex flex-col md:flex-row gap-4 mb-4">
              <div className="flex-1">
                <div className="relative">
                  <Search className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
                  <Input
                    placeholder={t('resources.searchPlaceholder')}
                    className="pl-10"
                  />
                </div>
              </div>
              <Button variant="outline" className="gap-2">
                <Filter className="w-4 h-4" />
                {t('resources.filter')}
              </Button>
            </div>

            <div className="flex flex-wrap gap-2">
              <Badge variant="outline">Mathematics</Badge>
              <Badge variant="outline">Science</Badge>
              <Badge variant="outline">English</Badge>
              <Badge variant="outline">K-5</Badge>
              <Badge variant="outline">6-8</Badge>
              <Badge variant="outline">9-12</Badge>
            </div>
          </div>

          {/* Resources Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            {resources.map((resource, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow">
                <CardHeader>
                  <div className="flex justify-between items-start mb-2">
                    <Badge variant="secondary">{resource.type}</Badge>
                    <div className="flex items-center gap-1">
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      <span className="text-sm text-gray-600">{resource.rating}</span>
                    </div>
                  </div>
                  <CardTitle className="text-lg">{resource.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2 mb-4">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-600">{t('resources.grade')}:</span>
                      <span>{resource.grade}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-600">{t('resources.subject')}:</span>
                      <span>{resource.subject}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-600">{t('resources.downloads')}:</span>
                      <span>{resource.downloads}</span>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button size="sm" className="flex-1 gap-2">
                      <Download className="w-4 h-4" />
                      {t('resources.download')}
                    </Button>
                    <Button variant="outline" size="sm">
                      {t('resources.preview')}
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* Upload Section */}
          <Card className="bg-blue-50 border-blue-200">
            <CardContent className="p-6 text-center">
              <Upload className="w-12 h-12 text-blue-600 mx-auto mb-4" />
              <h3 className="text-xl font-semibold mb-2 text-gray-900">
                {t('resources.shareTitle')}
              </h3>
              <p className="text-gray-600 mb-4">
                {t('resources.shareSubtitle')}
              </p>
              <Button className="bg-blue-600 hover:bg-blue-700">
                {t('resources.uploadResource')}
              </Button>
            </CardContent>
          </Card>
        </div>
      </main>

      <Footer />
    </div>
  );
};

export default Resources;
